<template>
  <el-container class="interactive_h5">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <el-tabs v-model="tabsName" @tab-click="handleClick">
          <el-tab-pane label="活动页面" name="0">
            <CampaignPage :key="isShow0" />
          </el-tab-pane>
          <el-tab-pane label="商品页面" name="1">
            <GoodsPage :key="isShow1" />
          </el-tab-pane>
          <el-tab-pane label="功能页面" name="2">
            <FunctionPage :key="isShow2" />
          </el-tab-pane>
          <el-tab-pane label="系统页面" name="3">
            <SystemPage :key="isShow3" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>
<script>
import CampaignPage from './components/campaignPage'
import GoodsPage from './components/goodsPage'
import FunctionPage from './components/functionPage'
import SystemPage from './components/systemPage'

export default {
  components: {
    CampaignPage,
    GoodsPage,
    FunctionPage,
    SystemPage
  },
  data() {
    return {
      isShow0: 0,
      isShow1: 0,
      isShow2: 0,
      isShow3: 0,
      tabsName: 0
    }
  },
  mounted() {
  },
  methods: {
    handleClick() {
      if (this.tabsName === '0') {
        this.isShow0++
      } else if (this.tabsName === '1') {
        this.isShow1++
      } else if (this.tabsName === '2') {
        this.isShow2++
      } else if (this.tabsName === '3') {
        this.isShow3++
      }
    }
  }
}
</script>

<style lang="scss">
.interactive_h5 {
  .h5-list {
    display: flex;
    align-items: left;
    width: calc(100%);
    overflow-x: hidden;
    margin-bottom: 1px;
    border: 1px solid #dddce2;
    .h5-img-item{
      margin-left: 20px;
      width: 40px;
      .item-img{
        border-radius: 4px;
        margin-top: 4px;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
    .h5-item {
      font-size: 16px;
      line-height: 20px;
      color: #3a3a3e;
      margin: 5px 1px 0;
      text-align: left;
      vertical-align: top;
      word-break: break-all;
      .infos {
        display:inline-block;
        text-align: left;
        line-height: 20px;
        margin-left: 40px;
        justify-content: space-between;
        li {
          width: 100%;
          text-align: left;
          font-weight: 400;
          p {
            margin: 0;
            font-size: 16px;
            line-height: 20px;
            span {
              display: inline-block;
              width: 30%;
            }
          }
        }
      }
    }
    > div {
      margin-right: 5px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      padding: 15px 0 5px;
      width: 100%;
      justify-content: left;
      align-items: left;
      height: 100px;
      .item-name {
        font-size: 18px;
        margin-bottom: 3px;
      }
      .example {
        font-size: 12px;
        margin-bottom: 3px;
      }
      .desc {
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
